<template>
	<view>
		<view class="box" style="padding-bottom: calc(96rpx + env(safe-area-inset-bottom));">
			<view class="re">



				<swiper class="swiper" circular :autoplay="autoplay" :interval="2000" :duration="500"
					style="width: 750rpx;height: 694rpx;">
					<swiper-item class="wp100 vt" v-for="item,index in bannerList" :key="index" @transition="pause"
						@change="pause">
						<view style="background-color: #000000;height: 694rpx;" v-if="item.type == 'video'">
							<video :src="item.url" :autoplay="true" :muted="false" play-btn-position="center"
								show-mute-btn="true" class="wp100 vt" style="width: 750rpx;height: 648rpx;"></video>
						</view>

						<image :src="item.url" v-if="item.type == 'image'" class="wp100 vt"
							style="width: 750rpx;height: 694rpx;" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>

			<view class="pl30 pr30">
				<view class="area_block_1">
					<view class="flex_box">
						<view class="ml20 mr20 re w154">
							<view class="logo_pos_box">
								<image
									:src="providerInfo && providerInfo.logo ? providerInfo.logo : '/static/brand_logo_2.png'"
									class="logo_pos" mode="aspectFit"></image>
							</view>
						</view>
						<view class="item mt20">
							<view class="fs30 lh40 cor_000">
								{{providerInfo && providerInfo.englishName ? providerInfo.englishName : (providerInfo && providerInfo.shortName ? providerInfo.shortName : '/')}}
							</view>
							<view class="mt5 df aic" style="min-height: 40rpx;">
							</view>

							<view class="mt5 aic">
								<view class="tags_2 mr15">{{providerInfo.areaName}}</view>
								<view class="tags_2 mr15">
									{{providerInfo.firstCategoryEnglishName ? providerInfo.firstCategoryEnglishName : providerInfo.firstCategory}}
								</view>
							</view>
						</view>
					</view>
					<view class="fs24 cor_000">{{providerInfo.position}}</view>
					<view class="mt15 df fw pl30 pr30" style="justify-content: space-between;">
						<view class="fs24 cor_004">
							{{providerInfo && providerInfo.englishName ? providerInfo.englishName : (providerInfo && providerInfo.name ? providerInfo.name : '/')}}
						</view>
						<view class="ml25 df aic">
						</view>
					</view>
				</view>

				<view class="mt40">
					<view class="nav_scroll_x">
						<view class="active nav_item"><text>Factory Intro</text></view>
					</view>
					<view class="mt40 fs24 lh34 cor_555" style="padding-bottom: 150rpx;">
						<view style="white-space: pre-wrap">
							{{providerInfo.intro ? providerInfo.intro : 'TA似乎很神秘，什么都没有介绍'}}
						</view>
					</view>
				</view>
			</view>

			<view class="bottom_btn_fix df aic">
				<view class="flex_box aic jcsba fs24 fwb"
					style="width: 100%;height:80rpx;margin: 0 auto;background: #FFFFFF;border-top: 4rpx solid #F9F9F9;">
					<view class="" @tap="toIndex()">Return to the exhibitor directory <img src="/static/return.png"
							style="widht: 24rpx;height: 24rpx;margin-left: 20rpx;"></view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		toast,
		showLoading,
		hideLoading
	} from '@/utils/toast.js';
	import {
		getSupplierInfoByIdApi,
		addVisitLogApi, //添加访问记录
		previewProductListApi,
		aliTranslateApi,
		getExhibitorByIdApi
	} from '../../http/api.js'
	export default {

		data() {
			return {
				show: false,
				id: 0,
				advertId: 0,
				type: 7,
				isFission: false,
				channelType: '',
				productType: '',
				token: '',
				providerInfo: {
					company: {

					}
				},
				userInfo: {

				},
				imageUrl: '',
				isShowShare: false,
				showTwo: false,
				compositeType: 0,
				sourceId: 0,
				bannerList: [],
				autoplay: true,
				category: '0',

				showTrancelation: false,
				trancelationColumns: [
					[{
						label: 'English',
						value: 'en',
						// 其他属性值
						id: 1
						// ...
					}, {
						label: '日本語',
						value: 'ja',
						id: 2
					}, {
						label: '한국어',
						value: 'ko',
						id: 3
					}]
				],
			}
		},
		onLoad(e) {

			if (e.id) {
				this.id = e.id;
			} else {
				toast('缺少参数id！');
			}
			if (e.type) {
				this.type = e.type;
			}

			if (e.advertId) {
				this.advertId = e.advertId;
			}

			this.sourceId = this.id;
			this.compositeType = 7;

			this.getSupplierInfoById();
		},


		methods: {
			toIndex() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},

			confirmLang: function(e) {


				let that = this;
				that.showTrancelation = false;
				console.log(that.providerInfo.introduction, 'that.providerInfo.introduction')
				showLoading('tracelating...');
				aliTranslateApi({
					formatType: 'text',
					sourcelanguage: 'zh',
					sourceText: that.providerInfo.introduction,
					targetLanguage: 'en'
				}).then(res => {
					that.providerInfo.intro = res.data;
					hideLoading();
				}).catch(err => {
					hideLoading();
				})


				if (that.providerInfo.areaName) {
					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: that.providerInfo.areaName,
						targetLanguage: 'en'
					}).then(res => {
						that.providerInfo.areaName = res.data;
					}).catch(err => {

					})
				}


				if (that.providerInfo.firstCategory && !that.providerInfo.firstCategoryEnglishName) {
					aliTranslateApi({
						formatType: 'text',
						sourcelanguage: 'zh',
						sourceText: that.providerInfo.firstCategory,
						targetLanguage: 'en'
					}).then(res => {
						that.providerInfo.firstCategoryEnglishName = res.data;

					}).catch(err => {

					})
				}
			},


			getDateFromString(str) {
				var reg = /^(\d+)-(\d+)-(\d+) (\d+):(\d+):(\d+)/;
				var s = str.match(reg);
				var result = "";
				if (s) {
					result = new Date(s[1], s[2] - 1, s[3], s[4], s[5], s[6]);
				}
				return result;
			},


			popupCloseTwo: function(e) {
				this.showTwo = false;
				// console.log(e,'e')
			},

			popupShow: function() {
				this.show = true
			},
			popupClose: function() {
				this.show = false
			},

			getSupplierInfoById() {

				let _this = this;
				let param = '/' + this.id;
				showLoading();
				getExhibitorByIdApi({
					param: param
				}).then(res => {
					this.providerInfo = res.data;
					for (let i in this.providerInfo.categoryList) {
						this.category = i;
						break;
					}
					var picture = res.data.logo;
					var pictures = new Array(); //定义一数组 
					if (picture) {
						if (picture.indexOf(',') > -1) {
							pictures = picture.split(","); //字符分割
						} else {
							pictures.push(picture);
						}
					}
					this.providerInfo.picture = pictures;
					let bannerList = [];
					if (this.providerInfo.videoUrl) {
						let banner = {
							url: this.providerInfo.videoUrl,
							type: 'video'
						}
						bannerList.push(banner);
						this.autoplay = false;
					}

					pictures.forEach(function(item) {
						let bannerPic = {
							url: item,
							type: 'image'
						}
						bannerList.push(bannerPic);
					})
					this.bannerList = bannerList;

					this.confirmLang();
					hideLoading();
				}).catch(err => {
					hideLoading();
					console.log('err', err)
				})
			}
		}

	}
</script>

<style>
	page {
		background-color: #fff;
	}

	.nav_scroll_x .active.nav_item::after,
	.nav_scroll_x_2 .active.nav_item::after {
		content: "";
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		width: 198rpx;
		height: 9px;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 4px;
		z-index: 2;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	.nav_scroll_x .nav_item {
		margin-right: 35rpx;
	}

	.icon_size_1 {
		width: 130rpx;
		height: 40rpx;
	}

	.degree_of_heat {
		position: absolute;
		top: 60rpx;
		right: 55rpx;
		padding: 0 15rpx;
		height: 46rpx;
		font-size: 20rpx;
		color: #fff;
		background: rgba(0, 0, 0, 0.4);
		border-radius: 23rpx;
		z-index: 2;
	}

	.area_block_1 {
		position: relative;
		padding: 20rpx 20rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 38rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 16rpx;
		margin-top: -60rpx;
	}

	.area_block_2 {
		position: relative;
		padding: 25rpx 35rpx;
		background: #F9F9F9;
		border-radius: 20rpx;
	}

	.logo_pos_box {
		position: absolute;
		top: -42rpx;
		left: 0;
		width: 158rpx;
		height: 158rpx;
		border: 2px solid #F2F3F5;
		border-radius: 50%;
		z-index: 2;
		background-color: #FFFFFF;
	}

	.logo_pos {
		/* position: absolute;
		top: -42rpx;
		left: 0; */
		width: 150rpx;
		height: 150rpx;

		border-radius: 50%;
		z-index: 2;
	}

	.tags_1 {
		padding: 0 6rpx;
		height: 36rpx;
		font-size: 20rpx;
		/* color: #FCAE32;
		background: #FFF4E1;
		border-radius: 18rpx;
		border: 2rpx solid #FFEDD0; */
		margin-right: 8rpx;
	}

	.tags_2 {
		display: inline-block;
		padding: 0 10rpx;
		min-height: 35rpx;
		line-height: 35rpx;
		font-size: 20rpx;
		color: #555555;
		background-color: #F3F4F7;
		border-radius: 10rpx;
	}

	.tags_3 {
		position: absolute;
		left: 50%;
		bottom: 0;
		min-width: 132rpx;
		padding: 0 4rpx;
		height: 35rpx;
		font-size: 14rpx;
		color: #fff;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 6rpx;
		transform: translateX(-50%);
		z-index: 3;
	}

	.btn_1 {
		padding: 0 10rpx;
		height: 45rpx;
		line-height: 45rpx;
		font-size: 20rpx;
		color: #555;
		background: #EEEEEE;
		border-radius: 23rpx;
	}

	.line_ver_bor {
		width: 1px;
		height: 40rpx;
		background-color: #EEEEEE;
	}

	.img_size {
		width: 325rpx;
		height: 325rpx;
		object-fit: cover;
		border-radius: 12rpx;
	}

	.bottom_btn_fix {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		padding-bottom: env(safe-area-inset-bottom);
		height: calc(96rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		z-index: 3;
	}

	.trade_docking_btn {
		width: 308rpx;
		height: 76rpx;
		font-size: 24rpx;
		color: #fff;
		background: linear-gradient(132deg, #22DDB2 0%, #009FF5 100%);
		border-radius: 20rpx;
	}

	.popup_area_sty {
		padding: 0 30rpx 25rpx;
		background-color: #fff;
		border-radius: 16rpx 16rpx 0 0;
	}

	.scroll_h_box {
		max-height: 560rpx;
		overflow-y: auto;
	}

	.close_popup_pos {
		position: absolute;
		top: 50%;
		right: 0;
		z-index: 2;
		transform: translateY(-50%);
	}

	.company_logo {
		width: 96rpx;
		height: 96rpx;
		border-radius: 15rpx;
	}

	/**弹窗**/
	.poster-canvas {
		position: fixed;
		top: -10000rpx;
		left: 0rpx;
		width: 600rpx;
		height: 920rpx;
	}

	.share-mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .5);
		z-index: 99;
	}

	.share-container {
		position: absolute;
		left: 130rpx;
		top: 100rpx;
		width: 500rpx;
		height: 890rpx;
		background: #FFFFFF;
	}

	.share-til {
		width: 100%;
		margin-top: 40rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}

	.share-price {
		margin-top: 50rpx;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #222222;
	}

	.share-code {
		position: absolute;
		// right: 30rpx;
		// bottom: 30rpx;
		left: 392rpx;
		top: 708rpx;
		width: 178rpx;
		height: 178rpx;
		background-color: #fff;
	}

	.share-bot {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 300rpx;
		background: #FFFFFF;
	}

	.share-btns {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 210rpx;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #EEEEEE;

	}

	.btns-list {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 100%;
		justify-content: center;
	}

	.btn {
		width: 60rpx;
		height: 60rpx;
	}

	.share-cancel {
		width: 100%;
		font-size: 24rpx;
		color: #222222;
		line-height: 90rpx;
		text-align: center;
	}

	button::after {
		border: none;
	}

	.back_btn {
		position: absolute;
		top: 60rpx;
		left: 55rpx;
		height: 46rpx;
		font-size: 20rpx;
		border-radius: 23rpx;
		z-index: 2;
	}

	.back_btn .back_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.w96 {
		width: 96rpx;
	}
</style>